<template>
  <div class="v-charts-line">
   <ve-line :data="lineData" :settings="chartSettings" :extend="chartExtend" height='340px'></ve-line>
   <!-- <p class="last-data" v-if="isdataLength4">
    <span>{{iT}}</span>
    <br>
    <span>{{iY}}</span>
   </p> -->
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {
      iY:'',
      iT:'',
      chartExtend:{
       
      },
      chartSettings:{
      },
      chartData: {
          columns: [
            // '日期', '访问用户', '下单用户', '下单率'
            ],
          rows: [
            // { '日期': '2018-01-01', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          ]
      }
    }
  },
  props:{
    lineData:{
      type:Object,
      default:function(){
        return {}
      }
    },
  },
  created(){
  },
  mounted(){
   
  },
  methods:{

  },
  components:{

  },
  computed:{

  },
  watch:{
    'lineData':{
      handler:function(nv,ov){
        console.log(nv.rows[nv.rows.length-1]['日期'])
        var time = nv.rows[nv.rows.length-1]['日期'];
        this.iY = time.substring(0,4);
        this.iT = time.substring(5);
        console.log(this.iT)
      },
      deep:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.v-charts-line {
  position: relative;
  .last-data {
    text-align: center;
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: 53px;
    background-color: #fff;
    span {
      font-size: 12px;
    }
  }
}
</style>
